var fragment = new Swiper(".swiper-container", {
    scrollbar: ".swiper-scrollbar",
    slidesPerView: "auto",
    scrollbarHide: !1,
    observer: !0,
    observeParents: !0,
    freeMode: !0,
    roundLengths: !0
})

var dragGame = {
    big: {
        p1: [0, 0],
        p2: [192, 0],
        p3: [384, 0],
        p4: [0, 133],
        p5: [134, 133],
        p6: [384, 192],
        p7: [0, 325],
        p8: [134, 384],
        p9: [384, 384]
    },
    to: {
        c1: 6,
        c2: 4,
        c3: 2,
        c4: 9,
        c5: 7,
        c6: 5,
        c7: 3,
        c8: 1,
        c9: 8
    },
    imgSize:{},
    source: {},
    isMove:false,
    donePicNum : 0,
    pz: function (e, t) {
        var i = e.offset().left
            , n = e.offset().left + e.outerWidth()
            , a = e.offset().top
            , o = e.offset().top + e.outerHeight()
            , s = t.offset().left
            , r = t.offset().left + t.outerWidth()
            , c = t.offset().top
            , h = t.offset().top + t.outerHeight();
        return !(n < s || i > r || o < c || a > h)
    },
    getImgWidth:function(imgW){
        return imgW / 100 * this.getFontSize();
    },
    getFontSize: function () {
        return $("html").css("font-size").replace("px", "")
    },
    setImgAll:function(){
        _this = this;
        $(".fragment .item").each(function(ind,item){
            var img = $(item).find("img");
            var order = $(this).attr("class"),
            order = order.replace("item ", "");
            (function (order,img) {
                _this.setImageAttr(img.attr("src"),function(w,h){
                    _this.imgSize[order] = [w,h]
                })
            })(order,img)

        })
    },
    setImageAttr:function(url,cb){
        var img = new Image;
        img.src = url;
        img.onload = function(){
            cb(img.width,img.height);
        }
    },
    nextGame:function(){
        setTimeout(function () {
            alert("恭喜过关了！")
        }, 1500)
        
    },
    bindEvent:function(){
        var _this = this;
        $(".fragment .item img").on("touchstart",function(e){
            _this.isMove = !1;
            var i = e.originalEvent.targetTouches[0];
            _this.source.client = {
                x: i.clientX,
                y: i.clientY
            },
            _this.source.clone = $(this).clone(),
            _this.source.ori = {
                x: $(this).offset().left,
                y: $(this).offset().top,
                width: $(this).width()
            }
        })
        $(".fragment .item img").on("touchmove",function(e){
            _this.isMove = !0;
            var i = e.originalEvent.targetTouches[0]
                , n = i.clientX - _this.source.client.x
                , a = i.clientY - _this.source.client.y;
            $(this).css({
                transform: "translate(" + n + "px, " + a + "px)"
            });
            var o = $(this).parent().attr("class");
            (o = o.replace("item ", "")) && (_this.pz($(this), $(".box-pintu-area .item" + _this.to[o])) ? _this.overlap = !0 : _this.overlap = !1)
                        
        })
        $(".fragment .item img").on("touchend",function(e){
            if(_this.isMove && _this.overlap){
                var i = $(this).parent().attr("class");
                    i = i.replace("item ", "");
                var n = _this.big["p" + _this.to[i]]
                    , a = _this.imgSize[i][0] / 100 * _this.getFontSize()
                    , o = n[0] / 100 * _this.getFontSize()
                    , s = n[1] / 100 * _this.getFontSize()
                    , r = $(this);
                    console.log(a,o,s)
                    TweenLite.to($(this)[0], .5, {
                        x: _this.big["p" + _this.to[i]][0] / 100 * _this.getFontSize() + $(".box-pintu-area").offset().left - _this.source.ori.x,
                        y: -(_this.source.ori.y - _this.big["p" + _this.to[i]][1] / 100 * _this.getFontSize() - $(".box-pintu-area").offset().top),
                        width: a,
                        ease: Power1.easeIn,
                        onComplete: function () {
                            $(".fragment-mask").hide(),
                                r.remove(),
                                $(".box-pintu-area").append(_this.source.clone.css({
                                    width: a,
                                    left: o,
                                    top: s
                                })),
                                _this.donePicNum++,
                                9 == _this.donePicNum && _this.nextGame(),
                                _this.donePicNum > 0 && $(".box-pintu .tip").fadeOut()
                        }
                    })

            }else{
                $(this).css({
                    transform: "translate(0,0)"
                })
            }            
        })
    },
    init:function(){
        this.donePicNum = 0;
        this.bindEvent();
        this.setImgAll();
    }
}
dragGame.init()